<template>
	<scroll-view class="flex-col page competition-details mine" scroll-y @scroll="onPageScroll">
		<view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
			<xlm-top-nav :scrollTop="scrollTop" title="赛事详情" />
			<view class="competition-page">
				<!-- 顶部横幅 -->
				<view class="banner-section">
					<!-- 图片区域 -->
					<view class="image-container">
						<image class="banner-image" :src="imgUrl + 'a.jpg'" mode="aspectFill" />
						<view class="share-icon" @click="handleShare">
							<!-- <text class="share-text">↗</text> -->
							<image :src="imgUrl + 'share2@2x.png'" mode="aspectFill"
								style="width: 100%;height: 100%;" />
						</view>
					</view>

					<!-- 信息卡片 -->
					<view class="info-card">
						<view class="card-content">
		<!-- 					<view class="top-row">
								<view class="left-content">
									<view class="event-icon">
										<view class="icon-inner"></view>
									</view>
									<text
										class="event-title">{{ competitionData.title }}{{ competitionData.subtitle }}</text>
								</view>
								<view class="live-status" v-if="competitionData.isLive">
									<text class="live-text">·直播中</text>
								</view>
							</view> -->

							<!-- <view class="bottom-row">
                 <view class="reservation-info">
                   <text class="reservation-count">{{ competitionData.reservationCount }}人已预约</text>
                 </view>
                 <button class="reservation-btn" @click="handleReservation">
                   预约关注
                 </button>
               </view> -->
						</view>
					</view>
				</view>

				<!-- 赛事信息 -->
				<view class="competition-info">
					<view class="schedule-info">
						<text class="schedule-time">{{ item_obj.competition_time }}</text>
						<text class="schedule-group">{{ item_obj.group_num }}</text>
						<text class="schedule-category">{{ item_obj.group_names }}</text>
						<text class="schedule-event">{{ getStatusText(item_obj.is_registration) }}</text>
						<text
							class="schedule-event">{{ item_obj.stage === 'finals' ? '决赛' :item_obj.stage === 'heat' ? '预赛' : '' }}</text>
						<!-- <text class="schedule-stage">{{ item_obj.stage  === 'finals' ? '决赛' :item_obj.stage === 'heat' ? '预赛' : '' }}</text> -->
					</view>
					<view class="participant-count">
						<text class="count-text">{{ item_obj.totals }}人</text>
					</view>
				</view>

				<!-- 排名列表 -->
				<view class="ranking-section">
					<view class="ranking-header">
						<text class="ranking-title">排名</text>
						<text class="athlete-title">运动员</text>
						<text class="group-title">组别</text>
						<text class="lane-title">道次</text>
						<text class="result-title">成绩</text>
					</view>
					<view class="ranking-list">
						<view v-for="(athlete, index) in rankingList" :key="athlete.id" class="ranking-item">
							<!-- 排名 -->
							<!-- <view class="rank-column">
                <image v-if="index < 3" class="medal" :src="getMedalIcon(idx + 1)" />
                <text v-else class="rank-num">{{ index + 1 }}</text>
              </view> -->
							<view class="rank">
								<image v-if="athlete.rank <= 3" class="medal" :src="getMedalIcon(athlete.rank)" />
								<text v-else class="rank-num">{{ athlete.rank }}</text>
							</view>

							<!-- 运动员信息 -->
							<view class="athlete-column">
								<image class="athlete-avatar"
									:src="athlete.avatar ? athlete.avatar : imgUrl + 'avatar1@2x.png'"
									mode="aspectFill" 
									@click="goToAthleteProfile(athlete)" />
								<view class="athlete-info">
									<view class="athlete-name-row">
										<text class="athlete-name">{{ athlete?.username ? athlete?.username : '--' }}</text>
										<text v-if="athlete.islate" class="late-tag">迟到</text>
									</view>
									<text class="athlete-id">{{ athlete?.num ? athlete?.num : '--' }}</text>
									<text
										class="athlete-location">{{ athlete?.address ? athlete?.address : '--' }}</text>
								</view>
							</view>

							<!-- 组别 -->
							<view class="group-column">
								<text class="group-text">{{ athlete.group_name }}</text>
							</view>

							<!-- 道次 -->
							<view class="lane-column">
								<text class="lane-text">{{ athlete.passes }}</text>
							</view>

							<!-- 成绩 -->
							<view class="result-column">
								<text class="result-time">{{ athlete.score }}</text>
								<view class="result-tag">
									<text class="tag-text">{{ athlete.tag }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		useOutsideAppStore
	} from '@/store/app'
	import {
		imgUrl
	} from '@/utils/config'
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		useRequest
	} from '@/api';
	const {
		API_INDEX_DETAIL_SCORE_POST
	} = useRequest();
	const appStore = useOutsideAppStore()
	const navHeight = computed(() => appStore.navHeight)
	const scrollTop = ref(0)

	const onPageScroll = (e) => {
		scrollTop.value = e.detail.scrollTop
	}

	function getMedalIcon(rank) {
		const icons = {
			1: imgUrl + 'firstPlace@2x.png',
			2: imgUrl + 'runner-up@2x.png',
			3: imgUrl + 'thirdPlace@2x.png'
		}
		return icons[rank]
	}
	const type_props = ref('');
	const result_props = ref('');
	const item_obj = ref({});
	// 赛事数据
	const competitionData = ref({
		title: 'WS田径公开赛深圳站',
		subtitle: '(视频号)',
		isLive: true,
		reservationCount: 3
	})

	// 赛程数据
	const scheduleData = ref({})

	// 排名数据
	const rankingList = ref([])

	// 获取排名样式类
	const getRankClass = (rank) => {
		if (rank === 1) return 'rank-gold'
		if (rank === 2) return 'rank-silver'
		if (rank === 3) return 'rank-bronze'
		return 'rank-normal'
	}

	// 预约关注
	const handleReservation = () => {
		uni.showToast({
			title: '预约成功！',
			icon: 'success'
		})
	}

	// 分享
	const handleShare = () => {
		uni.showToast({
			title: '分享功能开发中',
			icon: 'none'
		})
	}

	// 跳转到运动员主页
	const goToAthleteProfile = (athlete) => {
		if (!athlete || !athlete.id) {
			uni.showToast({
				title: '运动员信息不完整',
				icon: 'none'
			})
			return
		}
console.log('athlete',athlete);

		// 跳转到运动员主页，传递运动员ID
		uni.navigateTo({
			url: `/pages/personalHomepage/index?athlete_id=${athlete.athleteid}&athlete_name=${encodeURIComponent(athlete.username || '')}`
		})
	}
	const getStatusText = (status) => {
		const statusMap = {
			0: '未检录',
			1: '已检录'
		}
		return statusMap[status] || '未检录'
	}
	onShow(() => {
		const pages = getCurrentPages(); // 获取当前页面栈
		const currentPage = pages[pages.length - 1]; // 获取当前页面
		console.log('currentPage', currentPage);

		const options = currentPage.options; // 获取当前页面的参数
		const {
			type,
			result,
			item_id,
			event_id,
			group_num,
			competition_time,
			stage,
			item
		} = options;
		type_props.value = type;
		result_props.value = result;
		item_obj.value = JSON.parse(item);
		console.log('item_obj++++++++++++', item_obj.value);
		if (type_props.value && result_props.value) {
			getCompetitionDetails(type_props.value, result_props.value, item_id, event_id, group_num,
				competition_time, stage);
		}
	})
	const getCompetitionDetails = async (type, result, item_id, event_id, group_num, competition_time, stage) => {
		let params = {
			type,
			result,
			item_id,
			event_id,
			group_num,
			competition_time,
			stage
		}
		rankingList.value = [];
		try {

			const res = await API_INDEX_DETAIL_SCORE_POST(params)
			console.log('getCompetitionDetails', res)

			if (res.code === 1) {
				rankingList.value = res.data.data;
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		} catch (error) {
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>